<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="/socket.io/socket.io.js"></script>
  <div id ="test"/>
  <script src="index_js.js"></script>
</head>
<body>
  <div id="bigdiv">
    <div id="chattdiv">
      <p id="the paragraph">
	
	<!-- conversation log goes here: -->
	<!--<div id= 'conv'> Waiting for other people...</div> -->
	
	<br>
      </p>
      <div id="forms">
	<!--
	    <form>
	      Type here: <input type='text' id='f1'/>
	      <input type='button'
		     onclick = "sendmessage(document.getElementById('f1').value)"
		     value='submit'/>
	    </form>
	    -->
	
	Change nick: <input type='text' id='nick' maxlength=30
			    onkeydown = "if (event.keyCode==13) {changeNick(document.getElementById('nick').value); document.getElementById('nick').value='';}" 
			    />
	<button type="button" onclick="socket.emit('leave chat', null)" > leave chat </button>
        <button type="button" id = "startbutton" onclick="knapp_tryck()" > starta chatt</button>
      </div>
    </div>
    <!-- detta är topp menun med en drop menu och en länk.  -->
    <div id="header">
      <ul id="topmenu">
	<li><a href="index.html"> Chatt Mingel</a>
	</li>
	<li>
	  <a>drop meny</a>
	  <ul class="dropdown">
	    <li><a>något här </a></li>
	    <li><a>något annat</a></li>
	    <li><a>något tredje</a></li>
	    <li><a>något fjärde</a></li>
	  </ul>
	</li>
	<li><a href="#flikgrund2"> sing up </a>
	  <div id="flikgrund2" id="steng2">
	    <a href="#steng2" ><div id="stengruta">Close</div> </a>
	    <form method="POST" action="test.php"> 
	      användarnamn(max 20 tecken): <input type="text" name="username" value="" size="20" maxlength="20"><br>
	      password(max 30)<input type="password" name="password" size="20"><br>
	      <input type="submit" name="send" value="sign up"/>
	    </form>	
	  </div>
	</li>
      </ul>
      <div id="signin">
	<form> 
	  användarnamn: <input type="text" name="username" value="" size="20" maxlength="20">
	  password:<input type="password" name="password" size="20">
	  <input type="submit" name="send" value="sign in"/>
	</form>	
      </div>
    </div>
    <div id="footer">
      <!-- jag har här laggt till en filk med  alexs  test form. Jag trixat lite för att få till öppna och sänga, man får möjligen ändra till nåhot bättre om man orkar.-->
      <ul id="bottommenu">
	<li><a href="#flikgrund1"> test.html</a>
	  <div id="flikgrund1" id="steng1">
	    <a href="#steng1" ><div id="stengruta">Close</div> </a>
	    <form method="POST" action="test.php"> 
	      användarnamn(max 20 tecken): <input type="text" name="username" value="" size="50" maxlength="20"><br>
	      password(max 30)<input type="password" name="password" size="30"><br>
	      vilka språk kan du?<br>
	      <input type="checkbox" name="can[]" value="java">java<br>
	      <input type="checkbox" name="can[]" value="javascript">javascrip<br>
	      <input type="checkbox" name="can[]" value="php">php<br>
	      vilken är bäst?
	      <input type="radio" name="bestLanguage"
		     value="java" checked> java
	      <input type="radio" name="bestLanguage"
		     value="javascript"> javascript
	      <input type="radio" name="bestLanguage"
		     value="php"> php<br>
	      trevligaste språket?
	      <select name="trevligste" size="1">
		<option value="java" selected="selected">java</option>
		<option value="javascript">javascript</option>
		<option value="php">php</option>
	      </select><br>
	      <!---
		  skickar saker när man klickar på knappen
		-->
	      <input type="submit" name="send" value="Send data!"/>
	    </form>
	  </div>
	</li>
      </ul>
    </div>
    <div>
</body>
</html>
